<!DOCTYPE html>
<html lang="en">

<head>
    <title>登录</title>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <script src="../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .login_bg {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: url('../images/login.png') center no-repeat;
            background-size: 100%;
            z-index: 1;
        }

        .login_form {
            z-index: 999;
        }

        .account,
        .password {
            display: block;
            height: 47px;
            width: 80%;
            margin: 30px auto;
            box-sizing: border-box;

            /* border: 1px solid rgb(255, 255, 255); */
            color: rgb(225, 228, 230);
            /* background-color: rgba(0, 0, 0, 0.35); */
            text-decoration: none;
        }


        .noNccount {
            float: left;
            margin-left: 10%;
            margin-top: 10px;
        }

        .toRegister {
            text-align: center;
            display: block;
        }

        .toRegister a {
            text-align: center;

            color: #fff;
        }

        .btm {
            /* background-color: #3c363691; */
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .wz-logo {
            margin-top: 10%;
            height: 200px;
            background: url('../images/wa-logo.png') center no-repeat;
            background-size: 50%;
        }

        .forget-password {
            text-align: right;
            margin-right: 10%;
        }

        .forget-password a {
            color: #DDD;
        }

        .login {
            display: block;
            height: 50px;
            width: 80%;
            margin: 0 auto;
            margin-top: 20px;
            border-radius: 30.5px;
            background: url('../images/login-btn.png') center no-repeat;
            background-size: 100%;
            border-width: inherit;
            font-weight: 400;
        }
    </style>
</head>

<body>
    <div class="login_bg">
        <div class="btm">
            <div class="wz-logo">

            </div>
            <div class="login_form">
                <div class="input-box code">
                    <i class="icon-reg icon-phone"></i>
                    <input class="account" type="number" name="account" id="username" placeholder="请输入手机号码" required>
                    <div class="error">请输入正确的手机号码！</div>
                </div>
                <div class="input-box">
                    <i class="icon-reg icon-pwd"></i>
                    <input class="password" type="password" name="password" id="pwd" placeholder="请输入密码" required>
                </div>
                <!-- <div class="error">请输入正确的密码！</div>             -->
                <div class="forget-password">
                    <a href="./personal/forgetPwd.html">忘记密码</a>
                </div>

                <button class="login"></button>
                <div style="padding-top:8px">
                    <span class="toRegister">
                        <a href="../pages/register.html">还没有账号？立即注册</a>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/public.js"></script>
    <script>
        //         //表单验证
        
        $.post('/userInfo/client/getCookie',function (data) {
            if(data.code == 0){
                $('#username').val(data.username);
                $('#pwd').val(data.pwd);
            }
        })

        $('.account').blur(() => {
            let phone = $('.account').val()

            if (!/^1[3|4|5|7|8][0-9]{9}$/.test(phone)) {
                $('.account').next().css({
                    'display': 'block'
                })
                console.log('ss')
            } else {
                $('.account').next().css('display', 'none')
            }
        })
        $('.login').click(() => {
            login()
        })

        function login() {
            let userName = $('.account').val();
            let pwd = $('.password').val();
            // console.log(userName)
            document.cookie="username=John Doe";
            console.log(document.cookie)
            $.post(loginUrl, {
                userName,
                pwd
            }, function(res,status,xhr) {
                console.log(res.code)

                if(res.code==0){
                    window.location.href='./home/home.html'
                }
                // console.log(status)
                // window.localStorage.userInfo= JSON.stringify(res.obj) 
                // console.log( window.localStorage.userInf
                else{
                    alert(res.msg)
                }

               
                  
                // 
            })
        }
    </script>
</body>

</html>